import { useEffect, useState } from "react"
import { getDetail } from '../../tools/Ajax'
// import { useSearchParams } from "react-router-dom";
import { useLocation } from "react-router-dom";
import Zoommodule from "../../components/zoommodule/zoommodule";
import { getSameGoods } from '../../tools/Ajax'
import './detail.css'
import axios from "axios";


function Detail(){
    
    const arrt = useLocation()
    let [goodsData,setGoodsData] = useState([])  // 当前商品的详情数据
    let [arrdata,setArrdata] = useState([]) // 相似商品
    console.log(12,arrt.search.split('=')[1]);
    // console.log(arrt.state);
    

    useEffect(()=>{
       
        getList()
    },[])

    async function getList(){
        // 商品详情
        let p = arrt.search.split('=')[1]
        goodsData = []
        setGoodsData(goodsData)
        let res = await getDetail({goodId:p});
        res.data[0].imgs = JSON.parse(res.data[0].imgs)

        goodsData.push(...res.data)
        setGoodsData(goodsData)
        console.log(31,goodsData);
        console.log(31,goodsData[0].imgs);  // 放大镜图片
        goodsData[0].descriptionImage = JSON.parse(
            goodsData[0].descriptionImage
        );
        // goodsData[0].description = JSON.parse(goodsData[0].description);
        console.log(31,goodsData[0].descriptionImage);   // 详情页图片


        // 相似商品
        arrdata = []
        setArrdata(arrdata)
        let res1 = await getSameGoods({supplier: goodsData[0].supplier});
        console.log(32,goodsData);

        arrdata.push(res1.data)
        console.log(32,arrdata);

        setArrdata(res1.data)
        console.log(33,arrdata);

    }
    console.log(goodsData);

    return <div className="detail">
        <div>
            {/* 放大镜 */}
            <div>
                <Zoommodule imgs={goodsData[0]?.imgs}></Zoommodule>
                


            </div>
            {/* 相似商品 */}
            <div className="bigBox">
                <h3 className="hzi">相似商品推荐</h3>
                <div className="xaingsibox">
                    {
                        arrdata.map((item,i)=>{
                            return (
                                <div className="xiangsi" key={i}>
                                    <img className="img" src={item.imageUrl} alt="" />
                                    <h4 className="h4">{item.title}</h4>
                                    <div className="moneies">
                                        <p className="money">￥{item.priceStr}</p>
                                        <div className="ziti">
                                            <p className="p1">精选</p>
                                            <p className="p2">一起拼</p>
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    } 

                </div>
            </div>

            {/* 底部详情 */}
            <div>
                <p className="title">商品信息</p>
                <div>
                {
                    goodsData.map((items,i)=>{
                        return (
                            <div key={i}>
                                <img src={items.imgs} alt="" />
                            </div>
                        )
                    }) 
                }
                </div>
            </div>
        </div>
        
    </div>
}
export default Detail